import { component$ } from "@builder.io/qwik";
import { LuClock, LuAlertCircle } from "@qwikest/icons/lucide";
import type { Subscription } from '~/types';

export default component$<{ subscriptions: Subscription[] }>(({ subscriptions }) => {
	return (
		<div class="bg-white shadow overflow-hidden sm:rounded-md">
      <ul class="divide-y divide-gray-200">
        {subscriptions.map((subscription) => (
          <li key={subscription.id}>
            <div class="px-4 py-4 sm:px-6">
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <p class="text-sm font-medium text-blue-600 truncate">{subscription.url}</p>
                  <span class={`ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                    ${subscription.status === 'active' ? 'bg-green-100 text-green-800' :
                      subscription.status === 'error' ? 'bg-red-100 text-red-800' :
                      'bg-yellow-100 text-yellow-800'}`}>
                    {subscription.status}
                  </span>
                </div>
                <div class="ml-2 flex-shrink-0 flex">
                  <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                    {subscription.category}
                  </p>
                </div>
              </div>
              <div class="mt-2 sm:flex sm:justify-between">
                <div class="sm:flex">
                  <p class="flex items-center text-sm text-gray-500">
                    <LuClock class="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" />
                    {subscription.schedule}
                  </p>
                  <p class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
                    Resources: {subscription.resourceCount}
                  </p>
                </div>
                <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                  <p class="flex items-center">
                    {subscription.lastChecked ? (
                      <>Last checked: {new Date(subscription.lastChecked).toLocaleString()}</>
                    ) : (
                      <><LuAlertCircle class="mr-1.5 h-4 w-4 text-gray-400" />Never checked</>
                    )}
                  </p>
                </div>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
	);
});
